<template>
  <div>
    <my-header></my-header>
    <div>
      <!-- 详情导航 -->
      <div class="detail-nav">
        <ul class="fl d-flex">
          <li class="fl-l">
            <a href="" class="allTypeLang">所有分类</a>
          </li>
          <li class="fl-r">
            <a href="" class="indexLang">店铺首页</a>
          </li>
        </ul>
      </div>
      <!-- 详情主体 -->
      <!-- 上部 -->
      <div class="main-box">
        <div class="container d-flex justify-content-between">
          <!-- 左侧 -->
          <div class="preview">
            <!-- 图与放大镜（待做） -->
            <div class="preview-box">
              <div class="leftView">
                <img
                  src="../../public/img/shopShuiYin.png"
                  alt=""
                  class="shuiyin"
                />
                <div
                  class="zoom-slider"
                  style="display: none; left: 200px; top: 44px"
                ></div>
                <img
                  :src="`${this.data.pic}`"
                  alt="缩小图片"
                  class="smallImg"
                  v-if="`${this.data.pic}`!==undefined"
                />
                <img src="" v-else alt="">
              </div>
              <div class="rightView" style="display: none">
                <img
                  src="../../public/img/shopShuiYin.png"
                  alt=""
                  class="shuiyin-zoom"
                />
                <img
                  src=""
                  alt="放大图"
                  class="bigImg"
                  style="left: -500px; top: -500px"
                />
              </div>
            </div>
            <!-- 商品多角度图 -->
            <div class="thumb-img">
              <ul class="thumb-list">
                <li class="thumb-item">
                  <a href="javascript:;">
                    <img :src="`${this.data.pic}`" alt="" class="on" v-if="`${this.data.pic}`!==undefined"/>
                    <img src="" alt="" v-else>
                  </a>
                </li>
              </ul>
            </div>
          </div>
          <!-- 右侧 -->
          <div class="detail-property">
            <!-- 标题 -->
            <h1>{{ this.data.title }}</h1>
            <!-- 售前描述和价格 -->
            <div class="detail-panel">
              <div class="panel-name">
                {{ this.data.warning }}
              </div>
              <div class="detail-price">
                <span class="box-p">
                  <span style="color: black; font-weight: normal">价格:</span>
                  <span>&nbsp;￥{{ this.data.price }}</span
                  >&nbsp;
                  <span>/箱</span>
                </span>
              </div>
            </div>
            <!-- 地址相关 -->
            <div class="detail-address">
              <div class="detail-address-item">
                <span>发货区域:</span>
                <select name="" id="">
                  <option value="华北">华北</option>
                  <option value="华南" selected="1">华南</option>
                  <option value="华东">华东</option>
                  <option value="西南">西南</option>
                </select>
                有货
              </div>
              <div class="detail-address-item">
                <span>发货仓库:</span>
                <span>{{ this.data.place }}</span>
              </div>
              <div class="detail-address-item">
                <span>促销:</span>
                购买数量满20箱 单价减0.1元;购买数量满80箱
                单价减0.15元;购买数量满200箱 单价减0.25元;购买数量满1000箱
                单价减0.4元;
              </div>
            </div>
            <!-- 规格 -->
            <div class="detail-spec">
              <div class="detail-pro d-flex">
                <span>产品规格:</span>
                <button class="attr-res on">
                  <span>{{ this.data.spec }}</span>
                </button>
              </div>
            </div>
            <!-- 数量 -->
            <div class="sku-num">
              <div class="detail-pro">
                <span>数量:</span>
                <div class="right-dd d-flex align-items-lg-start">
                  <div class="num-ipt d-flex">
                    <input
                      type="button"
                      class="goods-reduce"
                      value="-"
                      @click="reduce"
                    />
                    <input
                      type="number"
                      class="goods-num"
                      :value="`${this.s}`"
                    />
                    <input
                      type="button"
                      class="goods-add"
                      value="+"
                      @click="add"
                    />
                  </div>
                  <div class="inventory-zone">
                    <p>库存:{{ this.data.inventory }}</p>
                    <p>已销售:{{ this.data.sold_count }}箱</p>
                  </div>
                </div>
              </div>
            </div>
            <!-- 售后 -->
            <div class="shouhou">
              <p>
                *该商品由 &nbsp;<span style="color: blue">{{
                  this.data.promise
                }}</span>
                &nbsp; 提供售后
              </p>
            </div>
            <div class="detail-action">
              <button class="add-btn" @click="shopcart">加入购物车</button>
              <button class="buy-btn">立即购买</button>
            </div>
          </div>
        </div>
      </div>
      <!-- 下部 -->
      <div class="main-box">
        <div class="container">
          <!-- 下部详情 -->
          <div class="detail-box">
            <!-- 介绍 -->
            <div style="width: 100%; height: 100%">
              <ul class="detail-sub d-flex">
                <li class="on">商品介绍</li>
              </ul>
            </div>
            <!-- 详情正文 -->
            <ul class="tab-box">
              <li class="tab-li">
                <!-- 文字产品 -->
                <div class="word-produce">
                  <ul class="produce-list d-flex flex-wrap">
                    <li class="title">
                      <span class="s-title">品牌 :</span>
                      <span class="brand">{{ this.data1.brand }}</span>
                    </li>
                    <li class="title">
                      <span class="s-title">商品名称 :</span>
                      <span class="brand">{{ this.data1.laptop_name }}</span>
                    </li>
                    <li class="title">
                      <span class="s-title">商品编码 :</span>
                      <span class="brand">{{ this.data1.laptop_code }}</span>
                    </li>
                    <li class="title">
                      <span class="s-title">商品形态 :</span>
                      <span class="brand">{{ this.data1.form }}</span>
                    </li>
                    <li class="title">
                      <span class="s-title">产地 :</span>
                      <span class="brand">{{ this.data1.orign_place }}</span>
                    </li>
                  </ul>
                </div>
                <!-- 图片产品 -->
                <div class="pic-produce">
                  <div>
                    <img :src="`${this.data1.pic}`" alt="" v-if="`${this.data1.pic}`!=undefined" />
                    <img src="" v-else alt="">
                  </div>
                </div>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>
<script>
import {mapMutations} from "vuex";
import axios from "axios";
export default {
  props: ["lid"],
  data() {
    return {
      l: [],
      //上部
      data: "", //上部详情
      //下部
      data1: "", //下部详情
      s: "", //数量
    };
  },
  watch: {
    // lid() {
    //   this.myload();
    // },
  },
  methods: {
    ...mapMutations(["addCar"]),
    add() {
      this.s++;
    },
    reduce() {
      if (this.s > 0) {
        this.s--;
      }
    },
    // 购物车跳转事件
    shopcart(){
      // this.$store.commit('addCar',this.data)
      //3.详情页中给添加购物车按钮设置点击事件把查询到当前商品的数据加入shopCart,
      this.data.count=this.s;
      this.addCar(this.data);
      this.$router.push(`/shopcart`)
    }
  },
  mounted() {
    // 上部
    axios.get(`/product/details/${this.lid}`).then((result) => {
      console.log(result.data);
      this.data = result.data.results[0];
      console.log(this.data);
    });
    //下部
    axios.get(`product/detail/${this.lid}`).then((result) => {
      console.log(result.data);
      this.data1 = result.data.results[0];
      console.log(this.data1);
    });
  },
};
</script>
<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

input {
  outline: none;
}

a {
  text-decoration: none;
  color: black;
}

body {
  width: 100%;
  color: #333333;
  position: relative;
  font-family: "微软雅黑", Arial;
  font-size: 12px !important;
  min-width: 1200px;
}

.detail-nav {
  width: 100%;
  height: 30px;
  background: #d61a39;
  margin: 0 auto;
}

.fl-l a {
  position: relative;
  padding: 0 50px;
  display: block;
  color: #fff;
  line-height: 30px;
}

.fl-r a {
  position: relative;
  padding: 0 50px;
  display: block;
  color: #fff;
  line-height: 30px;
}

.main-box {
  margin-top: 20px;
  font-size: 13px;
}

.main-box .container {
  width: 100%;
  margin: 0 auto;
  height: 100%;
}

/* 详情上部左边 */
.leftView {
  position: relative;
  width: 400px;
  height: 400px;
  border: 1px solid #ccc;
}

/* 水印 */
img.shuiyin {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 999;
}

/* 放大镜部分 */
.zoom-slider {
  display: none;
  width: 200px;
  height: 200px;
  background: #fede4f;
  opacity: 0.5;
  -moz-opacity: 0.5;
  -khtml-opacity: 0.5;
  filter: alpha(Opacity=50);
  position: absolute;
  cursor: move;
}

.smallImg {
  width: 400px;
  height: 400px;
  border: 1px solid #ccc !important;
}

.rightView {
  position: absolute;
  left: 430px;
  top: 0;
  width: 500px;
  height: 500px;
  /* border: 1px solid #ccc !important; */
  overflow: hidden;
  z-index: 100;
  background: #fff;
  display: none;
}

/* 商品多角度图 */
.thumb-img {
  margin-bottom: 20px;
}

.thumb-img .thumb-list {
  margin-top: 20px;
  width: 401px;
  height: 67px;
  overflow: hidden;
}

.thumb-item img {
  width: 65px;
  height: 65px;
  border: 1px solid #bfbfbf;
  margin-left: 10px;
  border: 1px solid #d61a39;
}

/* 详情上部右边 */
.detail-property {
  width: 765px;
  font-size: 13px;
  margin-left: 30px;
  border-right: 1px solid #d2cfcf;
  border-bottom: 1px solid #d2cfcf;
}

.detail-property h1 {
  font-size: 18px;
  font-weight: bolder;
}

.detail-panel {
  padding: 10px;
  background: url(https://www.ewfresh.com/images/panel.png) no-repeat top center;
  background-size: cover;
  font-size: 13px;
}

.detail-panel .panel-name {
  margin-bottom: 10px;
  line-height: 20px;
}

.detail-panel .detail-price {
  margin-top: 10px;
  font-size: 16px;
  color: #d61a39;
  font-weight: bold;
}

/* 地址 */
.detail-address {
  border-bottom: 1px dashed #c3c3c3;
  margin-bottom: 10px;
  margin-top: 10px;
}

.detail-address-item {
  margin-bottom: 20px;
}

.detail-address-item span {
  margin: 6px 10px 0 0;
}

/* 规格 */
.detail-pro {
  margin: 10px 0;
}

.detail-spec span {
  margin: 6px 10px 0 0;
}

.attr-res {
  min-width: 80px;
  white-space: nowrap;
  display: block;
  padding: 5px;
  text-align: center;
  border: 1px solid #ccc;
  color: #000;
  text-decoration: none;
  margin-right: 10px;
  margin-bottom: 10px;
  cursor: pointer;
  background: transparent;
  outline: none;
}

button,
input,
select,
textarea {
  font-size: 100%;
}

.attr-res.on {
  border: 1px solid #ff0036;
  background: url(https://www.ewfresh.com/images/selected.png) no-repeat bottom
    right;
}

/* 数量 */
.detail-pro {
  margin: 10px 0;
}

/* 减 */
.goods-reduce {
  float: left;
  width: 34px;
  height: 34px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

input[type="text"],
input[type="number"],
input[type="password"] {
  border: 1px solid #ccc;
}

.goods-num {
  float: left;
  text-align: center;
  width: 34px;
  height: 34px;
  border: none;
  background: #eeeeee;
  text-align: center;
}

input.goods-num[type="number"] {
  -moz-appearance: textfield;
}

.goods-num:hover {
  border: 1px solid black;
}

.goods-add {
  float: left;
  width: 34px;
  height: 34px;
  border: none;
  font-weight: bold;
  cursor: pointer;
}

.inventory-zone {
  margin-left: 15px;
}

.inventory-zone p {
  margin: 0;
}

/* 购买按钮 */
.detail-action {
  margin: 20px 0;
}

.detail-action .add-btn,
.detail-action .buy-btn {
  height: 35px;
  line-height: 35px;
  margin-left: 20px;
  text-align: center;
  float: left;
  overflow: hidden;
  position: relative;
  width: 145px;
  background: #d61a39;
  color: #fff;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  cursor: pointer;
  outline: none;
  border: none;
}

/* 下部详情 */
.detail-box {
  width: 100%;
  margin-left: 40px;
  border: 1px solid #d2cfcf;
}

.detail-sub {
  padding-left: 20px;
  border-bottom: 1px solid #d61a39;
  margin-top: 20px;
}

.detail-sub li {
  margin-bottom: -1px;
  color: #d61a39;
  padding: 10px;
  background: #fff;
  border-top: 1px solid #d61a39;
  border-right: 1px solid #d61a39;
  border-bottom: 1px solid #d61a39;
  cursor: pointer;
}

.detail-sub li.on {
  color: #fff;
  background: #d61a39;
}

.produce-list {
  padding: 20px 0;
  border-bottom: 1px dashed #d2cfcf;
}

.produce-list li {
  width: 33.3%;
  margin: 10px 0;
  padding: 0 20px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.s-title {
  font-weight: bold;
}

.pic-produce {
  margin: 20px 0;
  padding: 0 20px;
}
</style>
